<template>
  <div style="margin-top: 20px">
    <ko-card :title="$t('business.configuration.data')">
      <table style="width: 98%" class="tab-table">
        <tr>
          <th scope="col" width="48%" align="left">
            <label>{{ $t("business.workload.key") }}</label>
          </th>
          <th scope="col" width="48%" align="left">
            <label>{{ $t("business.workload.value") }}</label>
          </th>
          <th align="left"></th>
        </tr>
        <tr v-for="(label, index) in data" v-bind:key="label.index">
          <td>
            <ko-data-item
              placeholder="e.g. foo"
              clearable
              itemType="input"
              v-model="label.key"
              @change.native="transformation"
            />
          </td>
          <td>
            <ko-data-item
              placeholder="e.g. bar"
              clearable
              itemType="textarea"
              v-model="label.value"
              @change.native="transformation"
            />
          </td>
          <td>
            <el-button
              type="text"
              style="font-size: 10px"
              @click="handleDelete(index)"
            >
              {{ $t("commons.button.delete") }}
            </el-button>
          </td>
        </tr>
        <tr>
          <td align="left">
            <el-button @click="handleAdd">{{
              $t("commons.button.add")
            }}</el-button>
            <el-upload
              :before-upload="readFile"
              action=""
              style="display: inline-block; margin-left: 5px"
            >
              <el-button>{{ $t("commons.button.upload") }}</el-button>
            </el-upload>
          </td>
        </tr>
      </table>
    </ko-card>
  </div>
</template>

<script>
import KoDataItem from "@/components/ko-data-item";
import KoCard from "@/components/ko-card";

export default {
  name: "KoData",
  components: { KoCard, KoDataItem },
  props: {
    dataObj: Object
  },
  data() {
    return {
      data: []
    };
  },
  methods: {
    handleDelete(index) {
      this.data.splice(index, 1);
      this.transformation();
    },
    handleAdd() {
      const item = {
        index: Math.random(),
        key: "",
        value: ""
      };
      this.data.push(item);
    },
    readFile(file) {
      const reader = new FileReader();
      reader.readAsText(file);
      reader.onload = () => {
        const item = {
          index: Math.random(),
          key: file.name,
          value: reader.result
        };
        this.data.push(item);
        this.transformation();
      };
      return false;
    },
    transformation() {
      if (this.data) {
        let obj = {};
        for (let i = 0; i < this.data.length; i++) {
          if (this.data[i].key !== "") {
            obj[this.data[i].key] = this.data[i].value;
          }
        }
        this.$emit("update:dataObj", obj);
      }
    }
  },
  mounted() {
    if (this.dataObj && this.dataObj) {
      for (const key in this.dataObj) {
        if (Object.prototype.hasOwnProperty.call(this.dataObj, key)) {
          this.data.push({
            index: Math.random(),
            key: key,
            value: this.dataObj[key]
          });
        }
      }
    }
  }
};
</script>

<style scoped></style>
